<template>
  <div class="flex items-center gap-2 mt-3">
    <span class="mr-[55px]">掺混油品1种类</span>
    <el-select v-model="mixOil1Type" placeholder="请选择油品" style="width: 250px">
      <el-option
        v-for="item in oilList"
        :key="item.id"
        :label="item.chinese_name"
        :value="item.oils_name"
      />
    </el-select>
  </div>
  <div class="flex items-center mt-3">
    <span class="mr-[65px]">掺混油品1输量</span
    ><el-input v-model="mixOil1Flow" class="!w-[250px] mr-4" /><span class="">m³/h</span>
  </div>
  <div class="flex items-center gap-2 mt-3">
    <span class="mr-[55px]">掺混油品2种类</span>
    <el-select v-model="mixOil2Type" placeholder="请选择油品" style="width: 250px">
      <el-option
        v-for="item in oilList"
        :key="item.id"
        :label="item.chinese_name"
        :value="item.oils_name"
      />
    </el-select>
  </div>
  <div class="flex items-center mt-3">
    <span class="mr-[65px]">掺混油品2输量</span
    ><el-input v-model="mixOil2Flow" class="!w-[250px] mr-4" /><span class="">m³/h</span>
  </div>
  <div class="flex items-center mt-3">
    <span class="mr-[55px]">掺混后出站温度</span
    ><el-input v-model="mixTemp" class="!w-[250px] mr-4" /><span class="">℃</span>
  </div>
</template>

<script setup>
const props = defineProps({
  oilList: { type: Array }
})
const mixOil1Type = defineModel('mixOilType1')
const mixOil2Type = defineModel('mixOilType2')
// 响应式数据

const mixOil1Flow = ref('250')
const mixOil2Flow = ref('100')
const mixTemp = ref('40')

const validateSettings = () => {
  const mixFields = [
    { value: mixOil1Type.value, name: '掺混油品1种类' },
    { value: mixOil1Flow.value, name: '掺混油品1输量' },
    { value: mixOil2Type.value, name: '掺混油品2种类' },
    { value: mixOil2Flow.value, name: '掺混油品2输量' },
    { value: mixTemp.value, name: '掺混后出站温度' }
  ]

  for (const field of mixFields) {
    if (!field.value) {
      ElMessage.error(`${field.name}不能为空`)
      return
    }
  }
  return true
}

const isFormValid = computed(() => {
  const mixFields = [
    mixOil1Type.value,
    mixOil1Flow.value,
    mixOil2Type.value,
    mixOil2Flow.value,
    mixTemp.value
  ]
  if (!mixFields.every((field) => field)) return false
  return true
})

const getParamsData = () => {
  return {
    Oil_in1: mixOil1Type.value,
    Oil_in2: mixOil2Type.value,
    Q_IN1: mixOil1Flow.value,
    Q_IN2: mixOil2Flow.value,
    TEM: mixTemp.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>
